<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiperLayout">
			<up-swiper 
			:list="bannerList" 
			previousMargin="30" 
			nextMargin="30" 
			circular 
			indicator 
			:autoplay="true" 
			radius="5"
			height="300rpx"
			:loading="false" 
			bgColor="#ffffff">
			</up-swiper>
		</view>
		
		<!-- 卫生圈 -->
		<view class="circle-item" v-for="item in articleList" :key="item._id">
			<circle-item :item="item"></circle-item>
			<up-divider text="分割线" :dot="true" lineColor="#55ffff"></up-divider>
		</view>
		<!-- 数据loading -->
		<uni-load-more :status="ruleBtn ? 'loading': 'nomore'"></uni-load-more>
		<!-- 新增 -->
		<view class="addNews">
			<navigator url="/pages/addNews/index">
				<uni-icons type="plus" size="60" color="#6DE4C8"></uni-icons>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onTabItemTap,
		onPageScroll
	} from '@dcloudio/uni-app'
	const db = uniCloud.database()
	const bannerList = ref([])
	const articleList = ref([])
	const ruleBtn = ref(true)
	// 轮播图
	const getBanerList = async () => {
		await uniCloud.callFunction({
			name: 'banner',
		}).then(res => {
			bannerList.value = res.result.data
		})
	}
	// 获取文章
	const getArticleList = async () => {
		let artTemp = db.collection('articles').field("content,imageValue,userid,posttime").getTemp();
		let usetTemp = db.collection('uni-id-users').field("_id,nickname,avatar_file").getTemp()
		db.collection(artTemp, usetTemp).orderBy('posttime', 'desc').get()
			.then(res => {
				console.log(res);
				articleList.value = res.result.data
				// articleList.value = [...articleList.value, ...res.result.data]
				ruleBtn.value = res.result.data.length == 0;
				uni.stopPullDownRefresh()
			})
	}

	// 触底刷新
	onReachBottom(() => {
		if (ruleBtn.value) {
			getArticleList()
		}
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		getArticleList()
	})
	onLoad(() => {
		getBanerList()
		getArticleList()
	})
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 10rpx;

		.nav_custom {
			margin: 20rpx;
		}

		swiper {
			height: 300rpx;
			height: 340rpx;
			width: 100%;

			swiper-item {
				height: 100%;
				width: 100%;

				navigator {
					width: 100%;
					height: 100%;
					margin: 0 25rpx;

					image {
						border-radius: 20rpx;
						height: 100%;
						width: 700rpx;
					}
				}
			}
		}

		.navbar {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			text-align: center;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				text-align: center;

				.icon {
					height: 100rpx;
					width: 100rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.title {}
			}
		}

		.circle-item {
			padding: 10rpx;
			background-color: #f8fff1;
			box-shadow: 1px 7px 9px 0px gray;
			border-radius: 20rpx;
			margin: 20rpx;

		}

		.addNews {
			position: fixed;
			right: 50rpx;
			bottom: 150rpx;
			z-index: 100;

		}
	}
</style>